<#assign basePath=site.url>
<#include "header.html">
<style type="text/css">
body {
	background-image: url("${basePath}img/bgg.jpg");
}
.diwenben{
background-image: url("${basePath}img/diwenben.png");
}
.dibiaoti{
background-image: url("${basePath}img/dibiaoti.png");
}
.headdiv {
    background-image: url("${basePath}img/dibiaoti.png");
	border-bottom-color: #60605f;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-top-color: #60605f;
	border-top-width: 2px;
	border-top-style: solid;
}


.head {
	background-image: url("${basePath}img/shuhua_biaoti00.png");
	background-repeat: no-repeat;
}

.headmore {
	background-image: url("${basePath}img/shuhua_more_00.png");
	background-repeat: no-repeat;
}

.nav {
	margin: 0px;
	margin-top: -3px;
	padding: 0px;
	width: 940px;
	height: 99px;
	clear: both;
	background-image: url("${basePath}img/shuhua_bg_00.png");
	background-repeat: no-repeat;
	padding: 0px;
}

.none {
	margin: 0px;
	padding: 0px;
	background-color: red;
}

.nav li {
	float: left;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.content {
	background-image: url("${basePath}img/shuhua_bg_00.png");
	width: 906px;
	padding-left: 17px;
	padding-right: 17px;
	position: static;
}

.content1 {
	width: 611px;
	height: 651px;
	float: left;
	background-image: inherit;
}

.content1_1 {
	width: 611px;
	height: 372px;
	float: left;
	background-image: url("${basePath}img/di02.jpg");
}

.content1_2 {
	width: 302px;
	float: left;
	background-image: url("${basePath}img/di02.jpg");
	margin-top: 10px;
	height: 260px;
}

.content1_3 {
	margin-left: 5px;
	margin-top: 10px;
	width: 302px;
	height: 260px;
	float: left;
	background-image: url("${basePath}img/di02.jpg");
}

.content1content {
	background-image: url("${basePath}img/di02.jpg");
	height: 453px;
	clear: both;
	padding-top: 0px;
	font-size: 11px;
}

.border-tb {
	border-top-color: #bcbd9d;
	border-top-style: solid;
	border-top-width: 2px;
	border-bottom-color: #bcbd9d;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

.borderdiv {
	background-color: #bcbd9d;
	height: 2px;
}

.aa {
	opacity: 0.10;
	-moz-opacity: 0.10;
	filter: alpha(opacity = 10);
	background: #1d1e22;
}

.content1content ul {
	color: #000000;
	font-size: 13px;
	margin: 0px;
}

.spanleft {
	float: left;
}

.spanright {
	float: right;
}

.content2 {
	width: 278px;
	height: 495px;
	float: left;
	background-image: inherit;
	margin-left: 17px;
}

.content2_1 {
	margin-top: 20px;
	clear: both;
	position: relative;
}

.content2_1_content {
	background-image: url("${basePath}img/di02.jpg");
	height: 288px;
}

.content2_2 {
	clear: both;
	position: relative;
	margin-top: 5px;
}

.content2_2_content {
	background-image: url("${basePath}img/di02.jpg");
	height: 122px;
}

.content2_3 {
	margin-top: 5px;
	clear: both;
	position: relative;
}

.content2_3_content {
	background-image: url("${basePath}img/di02.jpg");
	height: 113px;
}

.content2content1 span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 180px;
	height: 100px;
}

.center {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	clear: both;
	text-align: center;
}

.hezuo {
	margin-top: 0px;
	clear: both;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 906px;
}

.hezuohead {
	background-image: url("${basePath}img/hezuobg.jpg");
	background-repeat: no-repeat;
	height: 29px;
	width: 906px;
}

.hezuoheadtext1 {
	color: white;
	float: left;
	margin-left: 25px;
	margin-top: 5px;
	font-size: 13px;
}

.hezuocentent {
	background-image: url("${basePath}img/di02.jpg");
	clear: both;
	height: 83px;
	width: 924px;
	padding-top: 15px;
}

.nav {
	margin: 0px;
	margin-top: -3px;
	padding: 0px;
	width: 940px;
	height: 99px;
	clear: both;
	background-image: url("${basePath}img/nav02.png");
	background-repeat: no-repeat;
	padding: 0px;
}

.none {
	margin: 0px;
	padding: 0px;
	background-color: red;
}

.nav li {
	float: left;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.nav1 {
	margin-left: 43px;
}

img {
	border: none;
}

ul {
	margin-left: 5px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

ul li {
	list-style: none;
	clear: both;
	padding: 2px;
}

.foot {
	background-image: url("${basePath}img/foot_bg.jpg");
	width: 940px;
	height: 116px;
	margin-left: 0px;
}

.ps {
	background-image: url("${basePath}img/paimai_ps.png");
}

.border {
	border-color: #ffffff;
	border-style: solid;
	border-width: 2px;
}

.borderold {
	border-color: #2e2e2e;
	border-style: solid;
	border-width: 2px;
}
.navimg{
display: block;
margin-left: 2px;
margin-right:0px;
}
</style>
<link href="${basePath}css/site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	var last = 1;
	var index = 0;
	var max = 7;
	$(document).ready(function() {

		$(".smimg").click(function(img) {
			//  alert();
			$("#showimg").attr("src", $(img.target).attr("src"));
			$("#txtdiv").text($(img.target).attr("txt"));
			$("#urlid").attr("href",$(img.target).attr("urlid"));
			$("#showimg").hide();
			$("#showimg").slideDown();
			$(".smimg").removeClass("border");
			$(".smimg").addClass("borderold");
			$(img.target).removeClass("borderold");
			$(img.target).addClass("border");
			if (last != 1) {
				$(last).removeClass("border");
				$(last).addClass("borderold");
			}
			last = img.target;
			var ids = $(img.target).attr("id");
			
			
			ids = ids.substring(1);
			index = parseInt(ids);

		});
		max = $(".smimg").length - 1;
		$("#pre").click(function(img) {
			index--;
			if (index < 0) {
				index = max;
			}
			var id = "#m" + index;
			$("#showimg").attr("src", $(id).attr("src"));
			$("#urlid").attr("href",$(id).attr("urlid"));
			$("#txtdiv").text($(id).attr("txt"));
			$("#showimg").hide();
			$("#showimg").slideDown();
			$(".smimg").removeClass("border");
			$(".smimg").addClass("borderold");
			$(id).removeClass("borderold");
			$(id).addClass("border");
			if (last != 1) {
				$(last).removeClass("border");
				$(last).addClass("borderold");
			}
			last = $(id);

		});

		$("#next").click(function(img) {
			index++;
			if (index > max) {
				index = 0;
			}
			var id = "#m" + index;
			$("#showimg").attr("src", $(id).attr("src"));
			$("#txtdiv").text($(id).attr("txt"));
			$("#urlid").attr("href",$(id).attr("urlid"));

			
			$("#showimg").hide();
			$("#showimg").fadeIn();
			$(".smimg").removeClass("border");
			$(".smimg").addClass("borderold");
			$(id).removeClass("borderold");
			$(id).addClass("border");
			if (last != 1) {
				$(last).removeClass("border");
				$(last).addClass("borderold");
			}
			last = $(id);
		});
		
		
		$("#divimg").mouseover(function(){
			$("#pre").show();
			$("#next").show();
		});
		$("#divimg").mouseout(function(){
					
			$("#pre").hide();
			$("#next").hide();	
		});
		$("#pre").hide();
		$("#next").hide();	
		$("#txtdiv").text($("#m0").attr("txt"));
		$("#urlid").attr("href",$("#m0").attr("urlid"));
		$("#showimg").attr("src", $("#m0").attr("src"));
	});
</script>
</head>
<body>
	<#include "../include/headimg.html"> 
	<#include "nav_画廊.html">
	<div class="content">


		<div id="divimg"  style="float: left;width: 640px;height: 430px;position: relative;background-image: url('${basePath}img/hualang_bg.png');">
		  <a href="#" id="urlid">
		 <img id="showimg" style="z-index:50; width: 632px;margin-left:4px;margin-top:2px; height:357px; position: absolute;" alt="" src="${basePath}img/demo.jpg">
		 </a>
		  <div id="txtdiv"   style="color:white; background-image:none; padding-left:0px;  z-index:160;left:0px;top:365px;text-align:center;font-size:21px; width: 640px; height: 50px; position: absolute;">
		  数据加载中..
		  </div>
		  <div  style="background-image:none; padding-left:0px;  z-index:160;left:0px;top:382px; width: 640px; height: 50px; position: absolute;">
		   <@cms_content_list count='11' channelId="42" titLen='15' orderBy='2' channelOption='1'>
			<#list tag_list as a>
		    <#if a_index==0>
		     <img  id="m${a_index}" urlid="${a.url}" txt="<@text_cut s=a.title len=titLen append=append/>" class="navimg smimg border"   style="width: 52px;height: 25px;margin-top: 13px;float: left;display: block;" alt="" src="${a.typeImg!site.defImg}">
		     <#else>
		     <img id="m${a_index}" urlid="${a.url}" txt="<@text_cut s=a.title len=titLen append=append/>" class="navimg smimg borderold"   style="width: 52px;height: 25px;margin-top: 13px;float: left;display: block;" alt="" src="${a.typeImg!site.defImg}">
		    </#if>
		   </#list>
		   </@cms_content_list>
		   </div>
		  <div style="background-color:#2e2e2e;background-image:none; padding-left:0px;  z-index:60;left:0px;top:360px; width:640px; height: 70px; position: absolute;"></div>
		  <img id="pre"  style="position: absolute;width: 48px;height:52px;margin-top: 13px;z-index:200;top: 143px;left:23px;" alt="" src="${basePath}img/paimai_left.png">
		  <img id="next"  style="position: absolute;width:48px;height: 52px;margin-top: 13px;z-index:201;;top: 143px;left:570px;" alt="" src="${basePath}img/paimai_right.png">
		  
		</div>

		<div class="diwenben"  style="float: left;width:251px;position: relative;margin-left: 15px;">
		           <div class="headdiv" style="width: 251px; height: 31px;" >
						<div class="head">热点关注</div>
						<div class="headmore">更多</div>
					</div>
					<div class="clear"></div>
					<div  style="padding-left: 2px;padding-top: 22px;">
						 <@cms_content_list count='6' channelId="42" titLen='7' orderBy='9' channelOption='1'>
			             <#list tag_list as a>
						<a href="${a.url}">
						<div style="margin:3px; width: 118px;height:122px;margin-top: 0px;float: left;display: block;position: relative;" >
					     <img  id="m${a_index}" txt="这是一张画m${a_index}"    style="width: 118px;height:91px;margin-top: 0px;float: left;display: block;" alt="" src="${a.typeImg!site.defImg}">
					     <div  style="width: 118px;height:18px;text-align:center; font-size: 13px;top:100px;;position: absolute;" ><@text_cut s=a.title len=titLen append=append/></div>
					   </div>
					   </a>
					   </#list>
					   </@cms_content_list>
					</div>
			
		</div>
         <div class="clear"></div>
		<div class="diwenben"   style="width: 906px;height: 310px;position: relative;margin-top: 5px;">
			<div class="headdiv" style="width: 906px; height: 28px;">
						<div class="head">著名画家</div>
						<div class="headmore">更多</div>
					</div>
			<div class="clear"></div>
			<div  class="bg2" style="padding-top: 12px;">
				 <@cms_content_list count='14' channelId="86" titLen='7' orderBy='9' channelOption='1'>
			      <#list tag_list as a>
						<a href="${a.url}">
				<div style="margin:5px; width: 118px;height:128px;margin-top: 0px;float: left;display: block;position: relative;" >
						     <img  id="m${a_index}" txt="这是一张画m${a_index}"    style="width: 109px;height:110px;margin-top: 0px;float: left;display: block;" alt="" src="${a.typeImg!site.defImg}">
						     <div  style="width: 118px;height:18px;text-align:center; font-size: 13px;top:113px;;position: absolute;" ><@text_cut s=a.title len=titLen append=append/></div>
				</div>
				</a>
			   </#list>
			    </@cms_content_list>
			</div>
		</div>
	</div>
	<div class="clear"></div>
	
 <#include "foot.html">

</body>
</html>